<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>登录</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        html,
        body {
            background: #fff;
        }

        .disable_btn {
            background: #8E8E8E !important;
        }
    </style>
</head>

<body>
<div class="app" v-cloak>
    <header>
        <div class="flex-x-sb">
            <span class="iconfont goback" @click="back">&#xe66f;</span>
            <div class="title">
                修改手机号
            </div>
        </div>
    </header>
    <div class="pt">
        <div class="lineGrey"></div>
        <div class="xgsj" v-if="changeStatus == 1">
            <div class="xgsj-item flex-x-sb">
                <input type="text" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')"
                       placeholder="请输入原手机号" v-model="oldPhone">
            </div>
            <div class="xgsj-item flex-x-sb">
                <input type="text" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')"
                       placeholder="请输入验证码" v-model="oldCode">
                <div class="code" @click="getCode('old')" v-show="codeStatus == 1">获取验证码</div>
                <div class="code" v-show="codeStatus == 2">{{count}}s后重新获取</div>
                <div class="code" @click="getCode('old')" v-show="codeStatus == 3">重新获取</div>

            </div>
            <div class="xgsj-btn flex-x-c">
                <div @click="goNext" :class="{'disable_btn': !send_pass}">下一步</div>
            </div>
        </div>
        <div class="xgsj" v-if="changeStatus == 2">
            <div class="xgsj-item flex-x-sb">
                <input type="text" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')"
                       placeholder="请输入新手机号" v-model="newPhone">
            </div>
            <div class="xgsj-item flex-x-sb">
                <input type="text" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')"
                       placeholder="请输入验证码" v-model="newCode">
                <div class="code" @click="getCode('new')" v-show="codeStatus == 1">获取验证码</div>
                <div class="code" v-show="codeStatus == 2">{{count}}s后重新获取</div>
                <div class="code" @click="getCode('new')" v-show="codeStatus == 3">重新获取</div>
            </div>
            <div class="xgsj-btn flex-x-c">
                <div @click="submit" :class="{'disable_btn': !send_pass}">提交</div>
            </div>
        </div>
        <div class="xgsj-suc" v-if="changeStatus == 3">
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/home/change_phone_comp.png" alt="">
            <div>手机号修改成功</div>
            <div class="xgsj-btn flex-x-c" style="margin-top:.4rem">
                <div @click="back">完成</div>
            </div>
        </div>
    </div>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/flexible.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/vue.min.js"></script>
<script src="../../script/iconfont.js"></script>
<script src="../../script/restful.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/businessCommon.js"></script>
<script>
    apiready = function () {
        vm = new Vue({
            el: '.app',
            data: {
                changeStatus: 1, //1原手机 2现手机 3完成
                oldPhone: '',
                oldCode: '',
                newCode: '',
                newPhone: '',
                codeStatus: 1, //1是获取验证码 2 倒计时 3是重新
                count: 59,
                codeTimer: null,
                send_pass: false
            },
            mounted: function () {
            },
            methods: {
                getCode(type) {
                    let vm = this
                    vm.codeStatus = 2
                    vm.codeTimer = setInterval(() => {
                        vm.count--
                        if (vm.count === 0) {
                            clearInterval(this.codeTimer)
                            vm.codeStatus = 3
                            vm.count = 59
                        }
                    }, 1000)
                    if (type === "old") {
                        common("smsSendCode")("UPDATE_OLD_PHONE", vm.oldPhone, null,  function (ret) {
                            toastBottom("发送成功!");
                            vm.send_pass = true
                        })
                    } else {
                        common("smsSendCode")("UPDATE_NEW_PHONE", vm.newPhone, null,  function (ret) {
                            toastBottom("发送成功!");
                            vm.send_pass = true
                        })
                    }
                },
                goNext() {
                    let vm = this
                    if (!(/^1[3456789]\d{9}$/.test(vm.oldPhone))) {
                        toastMiddle('请输入正确的手机号')
                        return false;
                    }
                    if (vm.oldCode === '' || vm.oldCode.length !== 4) {
                        toastMiddle('验证码输入不正确！')
                        return false;
                    }
                    common("smsCheckCode")("UPDATE_OLD_PHONE", vm.oldPhone, vm.oldCode, function (ret) {
                        console.log(JSON.stringify(ret))
                        vm.changeStatus = 2
                        clearInterval(vm.codeTimer)
                        vm.codeStatus = 1
                        vm.count = 59
                        vm.send_pass = false
                    })
                },
                submit() {
                    let vm = this
                    if (!(/^1[3456789]\d{9}$/.test(this.newPhone))) {
                        toastMiddle('请输入正确的手机号')
                        return false;
                    }
                    if (this.newCode == '') {
                        toastMiddle('请输入验证码')
                        return false;
                    }
                    mime("updateUserPhone")(vm.newPhone, vm.newCode, vm.oldCode, function (ret) {
                        vm.changeStatus = 3
                        api.sendEvent({name: 'updatePhoneSuccess'})
                    })
                },
                back() {
                    if (this.changeStatus == 2) {
                        this.changeStatus = 1
                        this.send_pass = false
                    } else {
                        api.closeWin();
                    }
                }
            },
        })
    }
</script>
</body>

</html>
